<template>
  <div class="bottom-bar">
      <div class="bar-item bar-left">
          <div>
              <i class="service icon"></i>
              <span class="text">客服</span>
          </div>
          <div>
              <i class="shop icon"></i>
              <span class="text">店铺</span>
          </div>
          <div>
              <i class="select icon"></i>
              <span class="text">收藏</span>
          </div>
      </div>
      <div class="bar-item bar-right">
          <div class="cart" @click="addToCart">加入购物车</div>
          <div class="buy" @click="buyClick">购买</div>
      </div>
  </div>
</template>

<script>


export default {
  name: "DetailBottomBar",
  methods: {
    addToCart() {
      //发送事件给Detail页面
      this.$emit('addToCart')
    }
  }
}
</script>

<style scoped>
  .bottom-bar {
      height: 49px;
      width: 100%;
      /* background-color: red; */
      position: fixed;
      bottom: 0;

      display: flex;
      text-align: center;
      /* line-height: 49px; */
  }
  .bar-item {
      display: flex;
      flex: 1;
  }
  .bar-item>div{
      flex: 1;
  }
  .bar-left {
      background-color: #fff;
  }
  .bar-left .text {
      font-size: 13px;
  }
  .bar-left .icon {
      display: block;
      width: 22px;
      height: 22px;
      margin: 5px auto 2px;
      background: url("../../../assets/img/detail/detail_bottom.png") 0 0/100%;
  }
  .bar-left .service {
      background-position: 0 -52px;
  }
  .bar-left .shop {
      background-position: 0 52px;
  }
  .bar-left .select {
      background-position: 0 0;
  }
  .bar-right {
      line-height: 49px;
      font-size: 18px;
  }
  .bar-right .cart {
      background-color: #ffdd0d;
  }
  .bar-right .buy {
      color: #fff;
      background-color: #ff799b;
  }
</style>